Table of Content

• 5. Positioning items
• 6. The flex property
• 7. Align items
• 8. Flex direction column
• 9. Wrapping
• 10. Flex grow, shrink, basis
  • flex-basis
  • flex-grow
  • flex-shrink
• 11. Order
• 12. Example of responsive image grid using flexbox
• 13. Example of responsive navbar using flexbox
• Credits

5. Positioning items

• To push certain flex item to end of the flex container, use margin.

Example 1: push the last element to end of flex container

• use margin-left: auto on the last grid item

Example 2: push 2 last elements to end of flex container

• use margin-left: auto on the first grid item that we want to push
• we could also achieve the same thing with using margin-right: auto on the first element.

6. The flex property

Example 1: Make element grow with window size

• To make elements fit the container and grow with the window size, add flex: 1
• flex: 1 is a shorthand for flex-shrink, flex-grow and flex-basis.

Example 2: Flex vs fixed width

• It is better to use flex than hardcoding width, because we would have to change the width percentage width percentage = 1/ num of child elements, every time we add new child, but we don’t need to change anything if we use flex

Example 3: Make some flex child flexing, and the rest fixed width

• To make some of the flex child flexing (ie be responsive when window resize) and the rest have fixed width, we just target the child we want to auto resize and give flex: 1.
• Here, we are allowing 'Home' and 'Logout' to take up space when the window resize and 'Search' be fixed. (it doesn't matter if we write flex:2 or flex:1 here, the result will be the same).

Example 4: Make only 1 child element 2x flex, and others 1x flex

• To set all child element under .container class flex, do .container > div { flex: 1}. We select using .container div {} to specifically select all div elements that are under .container class only.
• To make only 1 specific element flex 2x, we do .container > .search { flex: 2}. We need to use specific selector here, if we do .search {} it wont work because it has lower specificity than .container > div {} so it will not override that statement.

• If we did not include .container > div { flex: 1} and only do .container > .search { flex: 2}, then only .search child will flex, the others will have the same width. And in such cases, it doesn't matter if we do flex: 1 or flex: 2 for the .search, because it will be only 1 element that is flexing anyway.

7. Align items

• By default, flex items stretch themselves across the cross-axis. So if we set the flex container to be height: 100% then we can see that the flex items will stretch themselves as we stretch the window size.
• Setting height: 100% will only work because we have set height: 100% in html and body.
  • If we hadn't done that, then the height of the html and body will just be whatever the container force it to be -- ie whatever heights the container needs to be in order to display its content (since in this example, this container is the only contents within our body and html). Therefore, setting height: 100% wouldn't have any effect at all.
• So if we want a flex container to be responsive, we set height: 100% to the flex container, html and body.
• By default, align-items: stretch.

Example of flex-start

Example of aligning individual flex item

• To align individual flex item across the cross-axis, we use align-self.
• The cross-axis in this example is along the y-axis, because this is the default flex-direction: row.
• In the example below, we align the .logout item to the start of the cross-axis; and we align the .home item to the end of the cross-axis.

8. Flex direction column

• If we did not set height: 100% of a flex container, then it will only consume height it needs to display its content, so even if we do justify-content: flex-end, it will not have any effect.
  • When we set a flex container's height: 100%, we also need to set height: 100% to html and body or else it the html and body will only take up as much height as the what the flex container needs, so it won't make any difference.

Example to position items to bottom right corner

9. Wrapping

• By default, flex-wrap: nowrap;.
• Flex by default doesn't allow wrapping -- only allow one row or one column along the main axis.

Example 1: By default flex container shrink down children to fit inside the container

• By default flex-wrap: nowrap, so it will force all of its children on a single row or column depending on the flex-direction we set.
• It does not matter if the container is smaller or larger than the total width of its children.

Example 2: `flex-wrap: wrap` will push children to next row or column

10. Flex grow, shrink, basis

• flex is a shorthand property of flex-grow, flex-shrink and flex-basis.
• Setting flex: 1 is a shorthand for flex: 1 1 0 which is also equivalent to:
  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: 0
• The first value of flex is flex-grow, the second value is flex-shrink and the third value is flex-basis.

flex-basis

• State the "base width" of the element.

Example 1: container width is bigger than total width of its children

Example 2: container width is lesser than total width of its children

flex-grow

• states how much extra space should be distributed to each of the flex item.
• flex-grow: 0 is the default value.

Example 1: container width is bigger than the total width of its children

• Flex container will distribute any extra space to its children based on flex-grow property.
• flex-grow property works in relation to each other, eg when all of flex children has flex-grow: 1, then extra space will be distributed to each of them equally.

Example 2: element with `flex-grow: 0` will not "grow" in width when there are extra space available

flex-shrink

• states the rate of how the children will be shrink to fit the container when the container it is smaller than the total width of the children's base width (specified in flex-basis).
• flex-shrink: 1 is the default value.

Example 1: Setting all children to have `flex-shrink: 1` will force them to shrink equally when container width is less than total base width of its children

Example 2: Setting `flex-shrink: 0` to an element makes it not shrinking at all

Example 3: Higher `flex-shrink` value will make that element shrink at faster rate relative to the other elements

11. Order

• Flex is source order independence -- we can move around all the items regardless of how it was laid out in the HTML markup.
• By default, all flex items have order: 0.
• Setting order above 0 will move towards the right, and making it below 0 will move it towards the left.

Example 1: By default, all flex items has `order: 0`

Example 2: Setting `order` to be above 0 moves it towards the end of the container along the main axis

• It doesn't matter if we set order: 1 or order: 5, as long as the value is above 0 (as long as its order is higher than the rest of flex items), then it will give the same result as below.

Example 3: Reversing the order of the flex elements

• We can achieve the same thing using positive or negative values.
• All of the below examples give the same result.

12. Example of responsive image grid using flexbox

13. Example of responsive navbar using flexbox

Credits

• The course: https://v1.scrimba.com/learn/flexbox